# 动画API

打造丝滑流畅的动画效果。
![animation_example_movement.gif](https://wiki.cryptovoxels.com/animation_example_movement.gif)
调用 `Feature#createAnimation('position' 或 'rotation' 或 'scale')` 来创建一个动画对象。调用 `setKeys` 来指定关键帧。第一个关键帧将在 `frame: 0` 处以对象当前的位置创建。

调用 `feature#startAnimations` 来播放一旦创建的动画。

任何正在播放的动画都将在从API启动动画时停止。

附注：不要尝试通过每秒调用 `feature.position.x += 0.1` 60次来实现动画效果 - 因为来自脚本宿主到世界引擎的消息将被限制在每秒5hz，导致您的“动画”将变得非常卡顿。请使用动画API，它就像涂抹黄油一样顺滑。🧈

附注：动画以本机屏幕刷新率运行（60 / 90 / 144 / 240hz），尽管我们在30fps上指定关键帧。

## 位置动画

以下示例将火箭vox模型在1秒内向上移动10个voxel。

```js
let rocket = parcel.getFeatureById('rocketvox')

let r1 = rocket.createAnimation('position')

r1.setKeys([{
  frame: 30, // 标准为30fps（表示1秒）
  value: rocket.position.add( new Vector3(0,10,0) )
}])

rocket.startAnimations( [r1] ) // 启动动画
```

## 旋转动画

这段代码让火箭绕y轴旋转。旋转角度以[弧度](https://en.wikipedia.org/wiki/Radian)表示。

```js
let r2 = rocket.createAnimation('rotation')

r2.setKeys([{
  frame: 30,
  value: rocket.rotation.add(new Vector3(0, feature.rotation.y + Math.PI / 2, 0) )
}])

rocket.startAnimations( [r2] ) // 启动动画
```

## 多个动画

使用前面的两个示例：

```js
rocket.startAnimations( [r1, r2] )
```

## 旋转中心

在使用旋转动画时，您可能会注意到vox模型实际上并没有围绕其自然中心旋转。

对于一个打算旋转的vox模型，您应该将中心点放在Magicavoxel画布上的特定坐标上。对于一个32x32x32的vox模型，使用 `x:20` 和 `y:15` 作为真正的旋转中心。您可以使用[此vox模型](https://wiki.cryptovoxels.com/true_center_rotation_tool.vox)来帮助您获取真正的旋转中心。在该模型中，深蓝色voxel表示近似的旋转中心，而浅蓝色表示中心。
![true_center_rotation_32x32x32.png](https://wiki.cryptovoxels.com/true_center_rotation_32x32x32.png)

这种方法的一个不便之处是它会强制您缩小vox模型的尺寸。